<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城VMALL-华为手机、笔记本、平板、穿戴、官网正品保障</title>
    <link rel="Shortcut Icon" href="../img/img_ent_en_logo_ico.png">
    <link rel="stylesheet" href="../css/common/header.css">
    <link rel="stylesheet" href="../css/shopping.css">
    <link rel="stylesheet" href="../libs/iconfont.css">
    <link rel="stylesheet" href="../css/common/footer.css">
    <link rel="stylesheet" href="../css/common/reset.css">
    <link rel="stylesheet" href="../libs/swiper-bundle.min.css">
</head>
<body>
    <header></header>
        <div class="banner">
            <div class="banner-shopping-list">
                <ul>
                    <li><a href="">手机</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">电脑</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">平板</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">智慧屏</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">穿戴</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">耳机音响</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">门锁路由</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">配件</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">生态产品</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">家用电器</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">美食酒饮</a><span class="iconfont icon-you"></span></li>
                    <li><a href="">增值服务/企业商用</a><span class="iconfont icon-you"></span></li>
                </ul>
                <div class="shopping-hide-list">
                    <dl>
                        <dt><img src="https://res.vmallres.com/uomcdn/CN/cms/202108/F9479C6E6C946F129FF08B3C13574FC5.png" alt=""></dt>
                        <dd><a href="">Mate系列</a></dd>
                        <dt><img src="https://res.vmallres.com/uomcdn/CN/cms/202110/BA686E3523ABDE3DEABD97703F9DC484.png" alt=""></dt>
                        <dd><a href="">Mate系列</a></dd>
                        <dt><img src="https://res.vmallres.com/uomcdn/CN/cms/202104/38398EE56B4FE8DA504851811DF22E4F.png" alt=""></dt>
                        <dd><a href="">Mate系列</a></dd>
                        <dt><img src="https://res.vmallres.com/uomcdn/CN/cms/202108/FFFC583DF0D62696F4A74240C44B8BE5.png" alt=""></dt>
                        <dd><a href="">Mate系列</a></dd>
                        <dt><img src="https://res.vmallres.com/uomcdn/CN/cms/202104/93D89B71BFEB8551AB20F238E0415157.png" alt=""></dt>
                        <dd><a href="">Mate系列</a></dd>
                    </dl>
                </div>
            </div>
            <div class="swiper" style="width: 100%;height: 550px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/swiper3.webp" alt="" style="width: 100%; height: 100%;"></div>
                    <div class="swiper-slide"><img src="../img/swiper4.webp" alt="" style="width: 100%; height: 100%;"></div>
                    <div class="swiper-slide"><img src="../img/swiper5.webp" alt="" style="width: 100%; height: 100%;"></div>
                    <div class="swiper-slide"><img src="../img/swiper6.webp" alt="" style="width: 100%; height: 100%;"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev" style="color: red;"></div>
                <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
                <div class="swiper-button-next" style="color: red;"></div>
                <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            </div>
        </div>
        <div class="main">
            <div class="con-between"></div>
            <div class="con-center">
                <div class="con-top-list-title">
                    <!-- <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">智能家居</a></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">影音娱乐</a></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">AITO汽车</a></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">超新计划</a></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">以旧换新</a></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><a href="">会员频道</a></li>
                    </ul> -->
                </div>
                <div class="con-banner-list">
                    <!-- <div class="con-banner">
                        <img src="" alt="">
                    </div>
                    <div class="con-banner">
                        <img src="" alt="">
                    </div>
                    <div class="con-banner">
                        <img src="" alt="">
                    </div>
                    <div class="con-banner">
                        <img src="" alt="">
                    </div> -->
                </div>
                <div class="con-miaosha">
                    <div class="con-title-miaosha">
                        <h3><a href="">秒杀</a></h3>
                        <div class="miaosha-more">
                            <a href="">限时秒杀</a>
                            <span class="iconfont icon-you"></span>
                        </div>
                    </div>
                    <div class="miaosha-shopping-list">
                        <!-- <ul>
                            <li><img src="" alt=""></li>
                        </ul>
                        <ul>
                            <li><img src="" alt=""></li>
                        </ul>
                        <ul>
                            <li><img src="" alt=""></li>
                        </ul>
                        <ul>
                            <li><img src="" alt=""></li>
                        </ul>
                        <ul>
                            <li><img src="" alt=""></li>
                        </ul> -->
                    </div>
                </div>
                <div class="con-miaosha">
                    <div class="con-title-miaosha">
                        <h3><a href="">限时购</a></h3>
                        <div class="miaosha-more">
                            <a href="">限时购</a>
                            <span class="iconfont icon-you"></span>
                        </div>
                </div>
                <div class="miaosha-shopping-list">
                    <!-- <ul>
                        <li><img src="" alt=""></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                    </ul>
                    <ul>
                        <li><img src="" alt=""></li>
                    </ul> -->
                </div>
            </div>
            <div class="con-miaosha">
                <div class="con-title-miaosha">
                    <h3><a href="">手机</a></h3>
                    <div class="miaosha-more">
                        <a href="/html/shopping-mall.html">更多</a>
                        <span class="iconfont icon-you"></span>
                    </div>
            </div>
            <div class="miaosha-shopping-list">
                <!-- <ul>
                    <li><img src="" alt=""></li>
                </ul>
                <ul>
                    <li><img src="" alt=""></li>
                </ul>
                <ul>
                    <li><img src="" alt=""></li>
                </ul>
                <ul>
                    <li><img src="" alt=""></li>
                </ul> -->
            </div>
        </div>
            </div>
            <div class="con-between"></div>
        </div>
    <footer></footer>
    <script src="../libs/swiper-bundle.min.js"></script>
    <script src="../libs/jquery.min.js"></script>
    <script src="../js/shopping.js"></script>
    <script>
        $('header').load('./common/header.html')
        $('footer').load('./common/footer.html')
    </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            spaceBetween: 0,//间隔
            autoplay: true,//可选选项，自动滑动
            pagination: { //分页器
                el: '.swiper-pagination', //类型
                clickable: true,
            },
            loop: true, //循环切换
            navigation: { //左右切换标识
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

        //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
        new Swiper('.swiper')
        var mySwiper = document.querySelector('.swiper').swiper
        mySwiper.slideNext();
    </script>
</body>
</html>